import { Card, IconButton, TextField } from "@mui/material"
import { icons } from './icons'
import { StageOptionClass } from './utils'
import { useCallback, useEffect, useRef, useState } from "react"
import { Stage, Layer } from 'react-konva';
import { Delete, GetApp } from '@mui/icons-material';
import RightEdit from './RightEdit'
import './index.scss'

const Konva = () => {
  const containerRef = useRef(null)
  const [stageProps, setStageProps] = useState({
    width: 1920,
    height: 1080
  })
  const layerRef = useRef(null)
  const stageRef = useRef(null)
  const stageOptions = useRef(null)
  const createDragDom = useRef(null)
  const [selectDom, setSelectDom] = useState(null)

  useEffect(() => {
    stageOptions.current = new StageOptionClass(stageRef.current, layerRef.current, setSelectDom)
  }, [])

  const onDomDragStart = useCallback((e) => {
    const dragDom = icons.find(item => item.id === e.target.id)
    if (dragDom) {
      createDragDom.current = dragDom
    }
  }, [])

  const onDrop = useCallback((e) => {
    stageOptions.current.createGraph(e, createDragDom.current)
    createDragDom.current = null
  }, [])

  useEffect(() => {
    // stageOptions.current.focusGraph(selectDom)
    console.log('selected dom', selectDom)
  }, [selectDom])

  const exportFunc = useCallback(() => {
    const json = layerRef.current.toJSON();
    console.log(JSON.parse(json))
  }, [])

  const onDeleteNode = useCallback(() => {
    stageOptions.current.deleteNodes(selectDom)
  }, [selectDom])

  const drawerWidthChange = useCallback((e) => {
    const { value } = e.target
    if (isNaN(value)) return
    setStageProps({
      width: Number(value),
      height: stageProps.height
    })
  }, [stageProps.height])

  const drawerHeightChange = useCallback((e) => {
    const { value } = e.target
    if (isNaN(value)) return
    setStageProps({
      width: stageProps.width,
      height: Number(value)
    })
  }, [stageProps.width])

  return (
    <div className="konva-page">
      <Card className="top-tools">
        <IconButton onClick={onDeleteNode}>
          <Delete/>
        </IconButton>
        <IconButton onClick={exportFunc}>
          <GetApp/>
        </IconButton>
        <TextField label="画布宽度" variant="filled" value={stageProps.width} style={{ width: 100 }} onChange={drawerWidthChange} />
        <TextField label="画布高度" variant="filled" value={stageProps.height} style={{ width: 100, marginLeft: '8px' }} onChange={drawerHeightChange}/>
      </Card>
      <div className="edit-bottom">
        <Card className="left-icon">
          {
            icons.map(item => (
              <div key={item.id} className="iconlist">
                <img src={item.iconPath} className="iconPicture" draggable="true" onDragStart={onDomDragStart} id={item.id} />
                <div className="title">{item.title}</div>
              </div>
            ))
          }
        </Card>
        <div className="right-container" ref={containerRef} onDrop={onDrop} onDragOver={(e) => e.preventDefault()}>
          <Stage ref={stageRef} width={stageProps.width} height={stageProps.height} className="stageContainer">
            <Layer ref={layerRef}></Layer>
          </Stage>
        </div>
        <Card className="modify-container">
          <RightEdit selectDom={selectDom} layer={layerRef.current}/>
        </Card>
      </div>
    </div>
  )
}

export default Konva